<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.myApp-item{margin-bottom: 60px;}
.main{width:100%;}
.main-box-top{width: 100%; height: 50px; line-height: 50px; overflow: hidden; border-bottom: 1px solid red;}
.main-box-top-item{width: 25%; float: left; text-align: center; cursor:pointer;}
.main-box-top-item.active{color:red;}
.main-box-bottom-item{display: none;}
.main-box-bottom-item.active{display: block;}
</style>
</head>
<body>
<div id='myApp' >
    <div class="myApp-item"></div>
    <div class="myApp-item"> 
        <async-example></async-example>
    </div>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script> 
<script type="text/javascript">
// 异步组件
var url = "http://127.0.0.1/vue/php/1.php";
Vue.component('async-example',function (resolve, reject) {
    axios.post(url,{}).then(function (res) {
        console.log(res);
        resolve({
            data:function(){
                return {
                    message:'zhaozilong',
                    nav:[
                        {id:0,title:'首页',active:true},
                        {id:1,title:'发现',active:false},
                        {id:2,title:'订单',active:false},
                        {id:3,title:'我的',active:false},
                    ],
                }
            },
            methods:{
                openNav:function(k){
                    console.log(k);
                    this.changeNav(k);
                },
                changeNav:function(key){
                    this.nav.forEach((i,k)=>{
                        this.nav[k].active = false;
                    });
                    this.nav[key].active = true;
                },
            },
            template:res.data.template,
        });
    }).catch(function (error) {
        console.log(error);
    });
    setTimeout(function () { 
        resolve({
            data:function(){
                return {
                    message:'zhaozilong',
                    nav:[
                        {id:0,title:'首页',active:true},
                        {id:1,title:'发现',active:false},
                        {id:2,title:'订单',active:false},
                        {id:3,title:'我的',active:false},
                    ],
                }
            },
            methods:{
                openNav:function(k){
                    console.log(k);
                    this.changeNav(k);
                },
                changeNav:function(key){
                    this.nav.forEach((i,k)=>{
                        this.nav[k].active = false;
                    });
                    this.nav[key].active = true;
                },
            },
            template:"<div class='main'><div class='main-box-top'><div class='main-box-top-item' v-for='(x,k) in nav' :class='{\"active\":x.active}' @click='openNav(k)' v-text='x.title'></div></div><div class='main-box-bottom'><ul class='main-box-bottom-item' :class='{\"active\":nav[0].active}'><li>首页</li><li>首页</li><li>首页</li><li>首页</li><li>首页</li><li>首页</li></ul><ul class='main-box-bottom-item' :class='{\"active\":nav[1].active}'><li>发现</li><li>发现</li><li>发现</li><li>发现</li><li>发现</li><li>发现</li></ul><ul class='main-box-bottom-item' :class='{\"active\":nav[2].active}'><li>订单</li><li>订单</li><li>订单</li><li>订单</li><li>订单</li><li>订单</li></ul><ul class='main-box-bottom-item' :class='{\"active\":nav[3].active}'><li>我的</li><li>我的</li><li>我的</li><li>我的</li><li>我的</li><li>我的</li></ul></div></div>"
        })
    }, 1000);
});
var myApp = new Vue({
    el:"#myApp",
    data:{
        message:'我是消息',
        appmsg:'我是appmsg',
        nav:[
            {id:0,title:'首页',active:true},
            {id:1,title:'发现',active:false},
            {id:2,title:'订单',active:false},
            {id:3,title:'我的',active:false},
        ],
        htmlData:""
    },
    mounted:function(){},
    methods:{
        openNav:function(k){
            console.log(k);
            this.changeNav(k);
        },
        changeNav:function(key){
            this.nav.forEach((i,k)=>{
                this.nav[k].active = false;
            });
            this.nav[key].active = true;
        },
    }
});
</script>
<!-- 
<div class='main'>
    <div class='main-box-top'>
        <div class='main-box-top-item' v-for='(x,k) in nav' :class='{"active":x.active}' @click='openNav(k)' v-text='x.title'></div>
    </div>
    <div class='main-box-bottom'>
        <ul class='main-box-bottom-item' :class='{"active":nav[0].active}'>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
        <ul class='main-box-bottom-item' :class='{"active":nav[1].active}'>
            <li>发现</li>
            <li>发现</li>
            <li>发现</li>
            <li>发现</li>
            <li>发现</li>
            <li>发现</li>
        </ul>
        <ul class='main-box-bottom-item' :class='{"active":nav[2].active}'>
            <li>订单</li>
            <li>订单</li>
            <li>订单</li>
            <li>订单</li>
            <li>订单</li>
            <li>订单</li>
        </ul>
        <ul class='main-box-bottom-item' :class='{"active":nav[3].active}'>
            <li>我的</li>
            <li>我的</li>
            <li>我的</li>
            <li>我的</li>
            <li>我的</li>
            <li>我的</li>
        </ul>
    </div>
</div>
-->
</body>
</html>